<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>养老机构</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/thesame.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/statistic/rightCon.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/statistic/popCss.css}" />
    <style>
        .emptyDiv{width: 100%;line-height: 100px;text-align: center;color: gray}
        .haircut-con{ position: relative; }
        .haircut-nav{ width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; }
        .haircut-nav h1{ font-size: 32px; font-weight: bold; }
        .haircut-nav li h1{ padding-top: 20px; }
        .haircut-nav p{ font-size: 18px; }
        .haircut-nav li:first-child,.haircut-nav > h1{ padding-left: 30px; }
        .haircut-nav-stat{ display: flex; align-items: center; }
        .haircut-nav-stat li{ flex: 2; }
        .haircut-nav-stat li:first-child{ flex: 1.5; }
        .haircut-nav-stat li img{ display: block; margin: 0 auto; }
        .layui-tab-title li{ padding: 0 15px; width: auto }
        .bed-stat-dl-bg{ background: #FFFFFF linear-gradient(270deg, #38C0C4 0%, #1A8C93 100%); border-radius: 8px; color: #fff; }
        .pandect-con-one .bed-stat-dl-bg li dl{ border: 0; position: relative; }
        .pandect-con-one .bed-stat-dl-bg li dl::after{
            content: '';
            display: block;
            border-right: 1px solid #fff;
            position: absolute;
            right: 0;
            top: 20px;
            bottom: 20px;
        }
        .pandect-con-one .bed-stat-dl-bg li dl:first-child::after,.pandect-con-one .bed-stat-dl-bg li dl:last-child::after{ display: none; }
        .pandect-con-one .bed-stat-dl-bg li dl:first-child{ border-right: 1px solid #fff; }
        .pandect-con-one .bed-stat-dl-bg li dl:first-child dt{ font-size: 20px; }
        .pandect-con-one .bed-stat-dl-bg li dl dt img{ vertical-align: -3px; }
        .pandect-con-one .bed-stat-dl-bg li dl:first-child dd{ font-size: 50px; line-height: 35px; }
        .pandect-con-one .bed-stat-dl-bg dt{ margin: 10px 0 25px; }
        .pandect-con-one .bed-stat-dl-bg dd{ font-size: 40px; line-height: 40px; color: #fff; }
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-body">
    <div class="scroll-box bgWhite box-shadows border-radius4">
        <div class="add-box-scroll">
            <div class="pad20px">
                <article class="border-radius4 box-shadows2 pad20px mb20px">
                    <h1 class="mb15px fb f20px">核定床位数
                        <span style="font-size: 16px">（户籍老人床位比例<em class="green ml5px" style="border-bottom: 1px solid #1C9399" th:text="${basicData?.hd}+'%'"></em>）
                        </span>
                    </h1>
                    <nav class="pandect-con pandect-con-one">
                        <ul class="bed-stat-dl bed-stat-dl-bg fb">
                            <li class="pad20px">
                                <dl>
                                    <dt>
                                        <img th:src="@{/static/img/icon_zs.png}" alt="">
                                        <em>总数</em>
                                    </dt>
                                    <dd th:text="${basicData?.hdTotal}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>安亭福利院</em>
                                    </dt>
                                    <dd th:text="${basicData?.atflyHd}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>黄渡敬老院</em>
                                    </dt>
                                    <dd th:text="${basicData?.hdsqflyHd}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>方泰敬老院</em>
                                    </dt>
                                    <dd th:text="${basicData?.ftjlyHd}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>联西敬老院</em>
                                    </dt>
                                    <dd th:text="${basicData?.lxjlyHd}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>赵巷村长者照护</em>
                                    </dt>
                                    <dd th:text="${basicData?.zxczzzhHd}"></dd>
                                </dl>
                            </li>
                        </ul>
                    </nav>
                </article>
                <article class="border-radius4 box-shadows2 pad20px mb20px">
                    <h1 class="mb15px fb f20px">护理床位数
                        <span style="font-size: 16px">（护理床位比例<em class="green ml5px" style="border-bottom: 1px solid #1C9399" th:text="${basicData?.hl}+'%'"></em>）
                        </span>
                    </h1>
                    <nav class="pandect-con pandect-con-one">
                        <ul class="bed-stat-dl bed-stat-dl-bg fb">
                            <li class="pad20px">
                                <dl>
                                    <dt>
                                        <img th:src="@{/static/img/icon_zs.png}" alt="">
                                        <em>总数</em>
                                    </dt>
                                    <dd th:text="${basicData?.hlTotal}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>安亭福利院</em>
                                    </dt>
                                    <dd th:text="${basicData?.atflyHl}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>黄渡敬老院</em>
                                    </dt>
                                    <dd th:text="${basicData?.hdsqflyHl}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>方泰敬老院</em>
                                    </dt>
                                    <dd th:text="${basicData?.ftjlyHl}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>联西敬老院</em>
                                    </dt>
                                    <dd th:text="${basicData?.lxjlyHl}"></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <em>赵巷村长者照护</em>
                                    </dt>
                                    <dd th:text="${basicData?.zxczzzhHl}"></dd>
                                </dl>
                            </li>
                        </ul>
                    </nav>
                </article>
                <article class="border-radius4 box-shadows2 pad20px">
                    <h1 class="mb15px fb f20px">概况</h1>
                    <nav class="pandect-con">
                        <ul>
                            <li class="border-radius4 box-shadows2 mr10px haircut-con">
                                <div style="background: url(../static/img/icon_rz.png) no-repeat; background-size: 100% 100%; padding-bottom: 196px;"></div>
                                <ul class="haircut-nav haircut-nav-stat">
                                    <li><img th:src="@{/static/img/icon_xs_01.png}" ></li>
                                    <li>
                                        <p>上线机构</p>
                                        <h1 th:text="${allData?.totalPensionCount}"></h1>
                                    </li>
                                </ul>
                            </li>
                            <li class="border-radius4 box-shadows2 ml10px mr10px haircut-con">
                                <div style="background: url(../static/img/icon_sx.png) no-repeat; background-size: 100% 100%; padding-bottom: 196px;"></div>
                                <ul class="haircut-nav haircut-nav-stat">
                                    <li><img th:src="@{/static/img/icon_zcws_01.png}"></li>
                                    <li>
                                        <p>总床位数</p>
                                        <h1 th:text="${allData?.totalBedCount}"></h1>
                                    </li>
                                </ul>
                            </li>
                            <li class="border-radius4 box-shadows2 ml10px mr10px haircut-con">
                                <div style="background: url(../static/img/icon_zcws.png) no-repeat; background-size: 100% 100%; padding-bottom: 196px;"></div>
                                <ul class="haircut-nav haircut-nav-stat">
                                    <li><img th:src="@{/static/img/icon_zrs_01.png}" alt=""></li>
                                    <li>
                                        <p>总人数</p>
                                        <h1 th:text="${allData?.totalPeople}"></h1>
                                    </li>
                                </ul>
                            </li>
                            <li class="border-radius4 box-shadows2 ml10px haircut-con">
                                <div style="background: url(../static/img/icon_zrs.png) no-repeat; background-size: 100% 100%; padding-bottom: 196px;"></div>
                                <ul class="haircut-nav haircut-nav-stat">
                                    <li><img th:src="@{/static/img/icon_rzl_01.png}" alt=""></li>
                                    <li>
                                        <p>入住率</p>
                                        <h1 th:text="${allData?.occupancy}"></h1>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </article>
                <div class="layui-tab mt30px">
                    <ul class="layui-tab-title pl20px">
                        <li th:each="pension,state:${allData['organizationList']}" th:onclick="|changePensionData(${pension['orgId']})|" th:data-pension="${pension['orgId']}" th:class="${state.index}==0?'layui-this' :'' " style="font-size: 20px" th:text="${pension['orgName']}"></li>
                    </ul>
                    <div class="layui-tab-content bgWhite">
                        <div class="layui-tab-item layui-show">
                            <article class="border-radius4 box-shadows2 pad20px mt20px">
                                <h1 class="mb15px fb">床位统计</h1>
                                <nav class="pandect-con">
                                    <ul class="bed-stat-dl">
                                        <li class="border-radius4 border1px-ddd pad20px">
                                            <dl>
                                                <dt><img th:src="@{/static/img/stat_01.png}" alt="">总床位数</dt>
                                                <dd class="green" id="totalBedCount">0</dd>
                                            </dl>
                                            <dl>
                                                <dt><img th:src="@{/static/img/stat_02.png}" alt="">总人数</dt>
                                                <dd class="green" id="totalUserCount">0</dd>
                                            </dl>
                                            <dl>
                                                <dt><img th:src="@{/static/img/stat_03.png}" alt="">空置数</dt>
                                                <dd class="green" id="emptyBedCount">0</dd>
                                            </dl>
                                            <dl>
                                                <dt><img th:src="@{/static/img/stat_04.png}" alt="">入住率</dt>
                                                <dd class="green" id="pensionRate">0</dd>
                                            </dl>
                                        </li>
                                    </ul>
                                </nav>
                                <nav class="pandect-flex-width">
                                    <ul id="pensionBuilding">
                                    </ul>
                                </nav>
                            </article>
                            <article class="border-radius4 box-shadows2 pad20px mt20px">
                                <h1 class="mb15px fb">老人信息统计</h1>
                                <nav class="pandect-con">
                                    <ul class="bed-stat-dl">
                                        <li class="border-radius4 border1px-ddd pad20px">
                                            <dl>
                                                <dt>总服务老人数</dt>
                                                <dd class="green" id="historyOldMan">0</dd>
                                            </dl>
                                            <dl>
                                                <dt>目前老人数</dt>
                                                <dd class="green" id="currentOldMan">0</dd>
                                            </dl>
                                        </li>
                                    </ul>
                                </nav>
                                <nav class="pandect-con">
                                    <ul class="mt20px mb20px">
                                        <li class="border-radius4 border1px-ddd mr10px">
                                            <div class="overflow title-two-con pad20px"><span class="left f16px fb">性别比例</span></div>
                                            <div class="data-width">
                                                <div id="sexDataContent" style="width: 100%; height: 190px; margin-bottom: 20px;"></div>
                                            </div>
                                        </li>
                                        <li class="border-radius4 border1px-ddd ml10px">
                                            <div class="overflow title-two-con pad20px"><span class="left f16px fb">文化程度</span></div>
                                            <div class="data-width">
                                                <div id="educationDataContent" style="width: 100%; height: 190px; margin-bottom: 20px;"></div>
                                            </div>
                                        </li>
                                    </ul>
                                </nav>
                                <nav class="pandect-con">
                                    <ul class="mt20px mb20px">
                                        <li class="border-radius4 border1px-ddd mr10px">
                                            <div class="overflow title-two-con pad20px"><span class="left f16px fb">社保类型</span></div>
                                            <div class="data-width">
                                                <div id="socialInsuranceDataContent" style="width: 100%; height: 180px; margin-bottom: 20px;"></div>
                                            </div>
                                        </li>
                                        <li class="border-radius4 border1px-ddd ml10px">
                                            <div class="overflow title-two-con pad20px"><span class="left f16px fb">护理等级</span></div>
                                            <div class="mr20px ml20px mb20px">
                                                <div class="data-width">
                                                    <div id="nursingDataContent" style="width: 100%; height: 180px;"></div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </nav>
                                <nav class="pandect-con">
                                    <ul>
                                        <li class="border-radius4 border1px-ddd mr10px">
                                            <div class="overflow title-two-con pad20px"><span class="left f16px fb">长护险等级</span></div>
                                            <div class="mr20px ml20px mb20px">
                                                <div class="data-width">
                                                    <div id="assessmentDataContent" style="width: 100%; height: 330px;"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="border-radius4 border1px-ddd ml10px">
                                            <div class="overflow title-two-con pad20px"><span class="left f16px fb">年龄分布</span></div>
                                            <nav class="mr20px ml20px mb20px overflow data-age">
                                                <ul>
                                                    <li>
                                                        <div class="data-width">
                                                            <div id="manDataContent" style="width: 100%; height: 300px;"></div>
                                                        </div>
                                                        <div class="sex-man textRight">男<img th:src="@{/static/img/icon_man.png}" class="ml10px"></div>
                                                    </li>
                                                    <li>
                                                        <p>60岁以下</p>
                                                        <p>60-64岁</p>
                                                        <p>65-69岁</p>
                                                        <p>70-74岁</p>
                                                        <p>75-79岁</p>
                                                        <p>80-84岁</p>
                                                        <p>85-89岁</p>
                                                        <p>90-94岁</p>
                                                        <p>95-99岁</p>
                                                        <p>100岁及以上</p>
                                                    </li>
                                                    <li>
                                                        <div class="data-width">
                                                            <div id="womanDataContent" style="width: 100%; height: 300px;"></div>
                                                        </div>
                                                        <div class="sex-man"><img th:src="@{/static/img/icon_woman.png}" class="mr10px">女</div>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </li>
                                    </ul>
                                </nav>
                            </article>
                            <article class="border-radius4 box-shadows2 pad20px mt20px">
                                <div class="money-time relative">
                                    <h1 class="mb15px fb left">账务管理统计</h1>
                                    <div class="right">
                                        <p class="money-time-select" id="selectYear"></p>
                                        <article class="money-time-art hidden" >
                                            <div class="layui-tab layui-tab-child" style="margin: 0;">
                                                <div class="layui-form">
                                                    <ul class="layui-tab-title">
                                                        <li id="1" class="layui-this">按月</li>
                                                        <li id="2">按年</li>
                                                    </ul>
                                                </div>
                                                <div class="layui-tab-content">
                                                    <div class="layui-tab-item layui-show">
                                                        <div class="site-demo-laydate">
                                                            <div class="layui-inline" id="test-month"></div>
                                                        </div>
                                                    </div>
                                                    <div class="layui-tab-item">
                                                        <div class="layui-inline" id="test-year"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                </div>
                                <div class="financial-con">
                                    <article class="mr20px">
                                        <div class="financial-div financial-div-one mb20px">
                                            <div>
                                                <p>总费用（元）</p>
                                                <h1 id="TOTAL_FEE">0</h1>
                                            </div>
                                            <div class="two">
                                                <div>
                                                    <div>
                                                        <p>伙食费（元）</p>
                                                        <h2 id="MEAL_FEE">0</h2>
                                                    </div>
                                                    <div>
                                                        <p>床位费（元）</p>
                                                        <h2 id="BED_FEE">0</h2>
                                                    </div>
                                                    <div>
                                                        <p>护理费（元）</p>
                                                        <h2 id="NURSING_FEE">0</h2>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div>
                                                        <p>长护险补贴（元）</p>
                                                        <h2 id="ASSESSMENT_FEE">0</h2>
                                                    </div>
                                                    <div>
                                                        <p>其他费用（元）</p>
                                                        <h2 id="SPECIAL_FEE">0</h2>
                                                    </div>
                                                    <div></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="financial-div financial-div-two">
                                            <div>
                                                <p>总计实缴数（元）</p>
                                                <h1 id="totalPaymentAmount">0</h1>
                                            </div>
                                            <div>
                                                <div class="mar15px">
                                                    <div id="paymentFeeContent" class="data-width">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                    <article>
                                        <div class="overflow title-two-con pad20px">
                                            <span class="left f18px fb">欠费情况</span>
                                            <span onclick="queryAllOwningPayUser()" class="right f14px cursor">更多<img th:src="@{/static/img/icon_right_arrow.png}" alt=""></span>
                                        </div>
                                        <ul class="case-list" id="owningMoneyData">
                                        </ul>
                                    </article>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/static/js/jquery-2.1.3.min.js}"></script>
<script th:src="@{/static/js/basePath.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/js/echarts.min.js}"></script>
<script th:src="@{/static/js/pensionOrgData.js}"></script>
</body>
</html>
